<template>
    <div>
        <div class="wrap">
            <header style="">
                <span>
                {{title}}
                </span>
            </header>
            <div class="mavonEditor">
               <!-- <span class="copy-btn" v-clipboard:copy="handbook" v-clipboard:success="onCopy"
                v-clipboard:error="onError">复制</span> -->
                <mavon-editor :codeStyle="codeStyle" :ishljs="true" :toolbars="markdownOption"  v-model="handbook"/>
            </div>
        </div>
    </div>
</template>

<script>
import {getBlogById} from '../api/api'
import msgTip from '../msgTip'
// 富文本
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    export default {
        name : "ShowBlog",
        // 注册
        components: {
            mavonEditor
        },
        data () {
            return {
                content: 'qqq', // 输入的markdown
                html: '<div>323</div>', // 及时转的html
                input_title: 'asd',
                handbook: '<div>ewrsf</div>',
                title: '',
                markdownOption: {
                    // toolbars: {
                    bold: false, // 粗体
                    italic: false, // 斜体
                    header: false, // 标题
                    underline: false, // 下划线
                    strikethrough: false, // 中划线
                    mark: false, // 标记
                    superscript: false, // 上角标
                    subscript: false, // 下角标
                    quote: false, // 引用
                    ol: false, // 有序列表
                    ul: false, // 无序列表
                    link: false, // 链接
                    imagelink: false, // 图片链接
                    code: false, // code
                    table: false, // 表格
                    fullscreen: false, // 全屏编辑
                    readmodel: false, // 沉浸式阅读
                    htmlcode: false, // 展示html源码
                    help: false, // 帮助
                    /* 1.3.5 */
                    undo: false, // 上一步
                    redo: false, // 下一步
                    trash: false, // 清空
                    save: false, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: false, // 导航目录
                    /* 2.1.8 */
                    alignleft: false, // 左对齐
                    aligncenter: false, // 居中
                    alignright: false, // 右对齐
                    /* 2.2.1 */
                    subfield: false, // 单双栏模式
                    preview: false // 预览
                },
                codeStyle: 'monokai-sublime',

            }
        },
        methods : {

            /**
             * 获取内容
             */
            getData() {
                let _this = this;
                let param = {
                    id: this.$route.query.id
                };
                getBlogById(param).then((res) => {
                    this.checkStatus(res.data.code);
                    let data = res.data.list;
                    _this.title = data.title;
                    _this.handbook = data.content;
                })
            },

            /**
             * 复制
             */
            onCopy: function (e) {
                this.$message.success("内容已复制到剪切板！")
            },
            onError: function (e) {
                this.$message.error("抱歉，复制失败！")
            }

        },
        beforeMount : function () {

        },
        mounted : function () {
            console.log(this.$route.query.type);
            this.getData();
            this.write = document.querySelector('.v-note-edit');
            this.view = document.querySelector('.v-note-show');
            this.write.style.display = 'none';
            this.view.style.flex = '0 0 100%'

        }
    }
</script>

<style lang="">
    .wrap{
        background-image: url('../assets/head_blog.jpg');
        background-size: contain;
        padding-bottom: 50px;
    }
    .mavonEditor{
      width: 90%;
      margin:auto;
    }
    img{
        max-height:300px;
        display: block;
        margin: auto;
    }
    header{
        position: relative;
        height: 200px;
        text-align: center;
        line-height: 200px;
        font-size: 21px;
    }
</style>
